<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Authing Hello World</title>
    <link href="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components/lib/index.min.css" rel="stylesheet">
    </link>
    <style>
        .btn {
            background-color: #45bbee;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            color: #fff;
        }

        .btn:hover {
            background-color: #45aaff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="logout" style="display: none">
        你已登录，用户名为：<span id="user"></span>。
        <div>
            完整用户信息：
            <code id="userInfo"></code>
        </div>
        <button class="btn" id="logout-btn" style="margin-top:11px">退出</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
    <script src="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components@2.2.3"></script>


    <script>
        var guard = new AuthingNativeJsUIComponents.AuthingGuard("5d70d0e991fdd597019df70d", {
            mode: "modal",
        })


        function saveUserInfo(user) {
            localStorage.setItem('userInfo', JSON.stringify(user));
            localStorage.setItem('userId', user._id); // 存储用户 id 到 localStorage 中
            localStorage.setItem('username', user.username); // 存储用户 username 到 localStorage 中
            localStorage.setItem('token', user.token) // 存储用户 token 到 localStorage 中
        }

        guard.on('load', async function (authing) {
            console.log(authing)
            // Authing 实例加载成功后的回调函数，参数 authing 为 authing 对象

            // 使用 checkLoginStatus 方法判断当前的登录状态，需要使用 await
            // 如已经登录则隐藏登录框并显示当前的用户信息
            // 这段代码的作用是用户如果已经登录，那么刷新后还可以看到自己的用户信息
            const token = localStorage.getItem('token')
            const result = await authing.checkLoginStatus(token);
            if (result.status) {
                // 显示用户基础信息
                showLoginStatus();
            } else {
                // 用户未登录，展示 Guard 表单
                console.log('fcu')
                guard.show()
            }

            // 使用 jQuery 监听退出按钮的点击事件
            $('#logout-btn').click(async function () {
                // 使用 logout 方法，并传入用户的 userId 进行退出
                await authing.logout(localStorage.getItem('userId'));
                localStorage.clear()
                alert('退出成功');
                // 刷新页面
                location.reload();
            });
        })

        guard.on('login', async function (user) {
            // 登录成功，保存用户信息
            saveUserInfo(user)

            guard.hide(); // 为了简单起见，这里在登录成功后直接隐藏表单，在 React 或 Vue 应用中，你可以执行路由跳转或其他业务
            showLoginStatus();
        });

        const showLoginStatus = () => {
            $('#logout').show();
            $('#user').html(localStorage.getItem('username'));
            $('#userInfo').html(localStorage.getItem('userInfo'));
        }
    </script>
</body>

</html>